<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/order.css">
    <title>充电订单</title>
</head>
<body>
    <div id="app" v-cloak >
        <div class="orderDetailcontent bgf0 hide" :class="showApp?'showBox':''">
            <div class="orderDetailview">
                <div class="orderDetailCell flex_hm">
                    <div class="orderDetailCell_icon">
                        <img src="img/order/icon.png" alt="">
                    </div>
                    <div class="flex1 orderDetailName">{{msgInfo.cdzName}}</div>
                    <div v-if="msgInfo.chargeState==2" class="color666">已完成</div>
                    <div v-if="msgInfo.chargeState==1" class="color666">未充电</div>
                    <div v-if="msgInfo.chargeState==0" class="orderCell_hd_stateing">充电中</div>
                </div>
                <div class="orderDetailCell flex">
                    <div class="orderDetailCell_icon flex">
                        <div class="orderDetailCell_iconsmall"><img src="img/order/chongdian.png" alt=""></div>
                    </div>
                    <div class="flex1">
                        <div class="orderDetailTitle">终端编号：{{msgInfo.gunNum}}</div>
                        <div class="orderDetailTxt">桩位号:{{msgInfo.stakeCode}}</div>
                        <div class="orderDetailTxt">充电桩类型:{{msgInfo.chargeType}}</div>
                        <div class="orderDetailTxt">接口类型:{{msgInfo.standard}}</div>
                        <div class="orderDetailTxt">额定功率:{{msgInfo.power}}</div>
                        <div class="orderDetailTxt">额定电压:{{msgInfo.dy}}</div>
                    </div>
                </div>
                <div class="orderDetailCell flex">
                    <div class="orderDetailCell_icon">
                        <div class="orderDetailCell_iconsmall"><img src="img/order/jiage.png" alt=""></div>
                    </div>
                    <div class="flex1">
                        <div class="orderDetailTitle">费用说明：</div>
                        <div class="orderDetailTxt">充电费:{{msgInfo.cdf}}</div>
                        <div class="orderDetailTxt"> 服务费:{{msgInfo.fwf}}</div>
                        <div class="orderDetailTxt">停车费:{{msgInfo.tcf}}</div>
                        <div class="orderDetailTxt">充电模式:{{msgInfo.ms}}</div>
                        <div class="orderDetailTxt">充电金额:{{msgInfo.money}}</div>
                    </div>
                </div>
                <!-- 已完成充电 -->
                <div class="orderDetailCell flex">
                    <div class="orderDetailCell_icon lasticon">
                        <div class="orderDetailCell_iconsmall"><img src="img/order/shijian.png" alt=""></div>
                    </div>
                    <div class="flex1 ">
                        <div class="Chargetime">开始时间：{{msgInfo.startTime}}</div>
                        <div class="Chargetime " v-if="msgInfo.chargeState==2"> 结束时间：{{msgInfo.endTime}}</div>
                        <div class="Chargetime" v-if="msgInfo.chargeState==2" >已充电量: {{msgInfo.cddl}}</div>
                        <div class="Chargetime" v-if="msgInfo.chargeState==2">已充时长：{{msgInfo.chargeLong }}</div>
                    </div>
                </div>
                <div class="orderDetailCell flex_hm">
                    <div class="orderDetailCell_icon"></div>
                    <div class="flex1 flex">
                        <div class="orderDetailTitleName">充电费用:</div>
                        <div class="orderDetailPrice"> {{msgInfo.money}}</div>
                        <div class="payType">{{msgInfo.payType}}</div>
                    </div>
                </div>
                <!-- 未完成充电 -->
                <!-- <div class="orderDetailCell flex_hm">
                    <div class="orderDetailCell_icon"></div>
                    <div class="flex1 flex">
                        <div class="orderDetailTitleName">充电费用:</div>
                        <div class="orderDetailPrice"> 37.00<span>元</span></div>
                    </div>
                </div>
                <div class="orderDetailBtn flex_hm flex_hc">
                    <div class="orderDetailBtnPay flex_hm flex_hc">确认付款</div>
                </div> -->
            </div>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/index.js"></script>
    <script src="js/orderDetail.js"></script>
    <!-- <script src="js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var vConsole = new VConsole();
    </script> -->
</body>

</html>